<script setup lang='ts'>

import {
  Document,
  // Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { Menu as MenuIcon } from '@element-plus/icons-vue'


const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const router = useRouter();
const route = useRoute()
const activeIndex = ref('')
// 根据当前路由路径设置 activeIndex
const updateActiveIndex = (path) => {
  switch (path) {
    case '/home/personalInfo':
      activeIndex.value = '1'
      break
    case '/home/personalInfo/password':
      activeIndex.value = '2'
      break
    case '/home/personalInfo/history':
      activeIndex.value = '3'
      break
    case '/home/personalInfo/collection':
      activeIndex.value = '4'
      break
    case '/home/personalInfo/setting':
      activeIndex.value = '5'
      break
    default:
      activeIndex.value = '1'
      break
  }
}

//初始化
// updateActiveIndex(route.path)
// console.log("route.path:" +  route.path)
// console.log("activeIndex.value:" +  activeIndex.value)

// 监听路由变化并更新 activeIndex
watch(route, (newRoute) => {
  updateActiveIndex(newRoute.path)
},
  { immediate: true }
)

const toInfo = () => {
  router.push('/home/personalInfo')
}

const toPassword = () => {
  router.push('/home/personalInfo/password')
}

const toHistory = () => {
  router.push('/home/personalInfo/history')
}

const toCollection = () => {
  router.push('/home/personalInfo/collection')
}

const toSetting = () => {
  router.push('/home/personalInfo/setting')
}


// 判断是否是手机端
const isMobile = ref(false)
// 抽屉菜单是否显示
const drawerVisible = ref(false)

// 检查当前屏幕宽度（三端适配使用）
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 600
}

// checkMobile();

const openDrawer = () => {
  drawerVisible.value = true
}
const closeDrawer = () => {
  drawerVisible.value = false
}

// 在挂载之后监听窗口大小变化，并更新isMobile
onMounted(() => {
  window.dispatchEvent(new Event('resize'))
  checkMobile()
  window.addEventListener('resize', checkMobile)
})
// 在卸载之前移除窗口大小变化监听
onBeforeUnmount(() => {
  window.removeEventListener('resize', checkMobile)
})

const handleDrawerNav = (fn) => {
  fn()
  closeDrawer()
}

</script>

<template>
  
    <!-- 如果是pc/平板端则正常渲染 -->
    <el-row v-if="!isMobile" class="main-pc">
      <el-col :span="6">
        <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
          <el-menu-item @click="toInfo" index="1">
            <el-icon>
              <location />
            </el-icon>
            <span>我的信息</span>
          </el-menu-item>
          <el-menu-item @click="toPassword" index="2">
            <el-icon>
              <MenuIcon />
            </el-icon>
            <span>修改密码</span>
          </el-menu-item>
          <el-menu-item @click="toHistory" index="3">
            <el-icon>
              <document />
            </el-icon>
            <span>历史记录</span>
          </el-menu-item>
          <el-menu-item @click="toCollection" index="4">
            <el-icon>
              <Star />
            </el-icon>
            <span>我的收藏</span>
          </el-menu-item>
          <el-menu-item @click="toSetting" index="5">
            <el-icon>
              <setting />
            </el-icon>
            <span>设置</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col class="content" :span="18">

        <router-view></router-view>

      </el-col>
    </el-row>
    <!-- 如果是移动端, 则需要添加一个隐藏的侧边栏 -->
    <div v-else class="main-mobile">

      <el-row class="mobile-memu">
        <el-icon class="mobile-memu-button" @click="openDrawer">
          <Expand />
        </el-icon>
        <p>子菜单</p>
      </el-row>

      <el-row class="mobile-content" :span="24">
        <router-view></router-view>
      </el-row>
    </div>
  
  <!-- 移动端点击子菜单之后的drawer -->
  <el-drawer v-model="drawerVisible" direction="ltr" size="70vw" :with-header="false" :append-to-body="true">
    <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
      <el-menu-item @click="handleDrawerNav(toInfo)" index="1">
        <el-icon>
          <location />
        </el-icon>
        <span>我的信息</span>
      </el-menu-item>
      <el-menu-item @click="handleDrawerNav(toPassword)" index="2">
        <el-icon>
          <MenuIcon />
        </el-icon>
        <span>修改密码</span>
      </el-menu-item>
      <el-menu-item @click="handleDrawerNav(toHistory)" index="3">
        <el-icon>
          <document />
        </el-icon>
        <span>历史记录</span>
      </el-menu-item>
      <el-menu-item @click="handleDrawerNav(toCollection)" index="4">
        <el-icon>
          <Star />
        </el-icon>
        <span>我的收藏</span>
      </el-menu-item>
      <el-menu-item @click="handleDrawerNav(toSetting)" index="5">
        <el-icon>
          <setting />
        </el-icon>
        <span>设置</span>
      </el-menu-item>
    </el-menu>
  </el-drawer>
</template>

<style scoped>
/* .container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
} */

.main-pc {
  height: 100%;
  /* display: flex; */
}

/* .content {
  padding: 10px;
  margin: 10px;
} */

/* 手机端样式 */
@media (max-width: 600px) {
  .main-mobile {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* 关键 */
  }

  .mobile-memu {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    margin-left: 5vw;
  }

  .mobile-memu-button {
    display: block;
    /* flex-shrink: 0; */
    font-size: 24px;
    cursor: pointer;
  }
}
</style>